<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab栏</title>
    <style>
       *{ margin: 0;  padding: 0;  border: 0;  list-style: none;  }
        .tab{  width: 430px;  height: 230px;  border: 1px solid #000;  margin: 100px auto;  padding: 10px;  }
        .tab h2 {height: 30px; text-align: center;line-height: 30px;}
        .tab h2 span{height: 30px;background: #ccc;width: 100px;display: inline-block; float: left;font-size: 16px;margin-right: 10px;}
        .tab .last{margin: 0;}
        .tab div{  width: 430px;  height: 200px;  background: lightblue;  display: none;  }
        .tab .current{  display: block;  }
        .tab .first{  background: lightblue;  }
    </style>
    <script>
        window.onload = function(){
            function tabFn(box_id){
                var obox = document.getElementById(box_id);
                var spans = obox.getElementsByTagName("span");
                var divs = obox.getElementsByTagName("div");
                for (var i=0 ;i<spans.length ; i++){
                    spans[i].index = i;
                    spans[i].onmouseover = function(){
                        for (var i=0 ;i<spans.length ; i++){
                            spans[i].style.background = "#ccc";
                            divs[i].style.display = "none";
                        }
                        divs[this.index].style.display = "block";
                        this.style.background = "lightblue";
                    }
                }
            }
            tabFn("box1");
            tabFn("box2");
        }
    </script>
</head>
<body>
<div class="tab" id="box1">
    <h2>
        <span class="first">新闻</span>
        <span>娱乐</span>
        <span>财经</span>
        <span class="last">游戏</span>
    </h2>
    <div class="current">新闻</div>
    <div>娱乐</div>
    <div>财经</div>
    <div>游戏</div>
</div>
<div class="tab" id="box2">
    <h2>
        <span class="first">汽车</span>
        <span>体育</span>
        <span>生活</span>
        <span class="last">国际</span>
    </h2>
    <div class="current">汽车</div>
    <div>体育</div>
    <div>生活</div>
    <div>国际</div>
</div>
\</body>
</html>